<template>
  <div class="login">
    <img src="/public/center.png" alt="" />
  </div>

  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <p class="txt">
        <span>免费注册</span>
        <span>忘记密码</span>
      </p>
      <van-button round block type="primary" native-type="submit">
        登录
      </van-button>
    </div>
  </van-form>

</template>

<script setup>
import router from "@/router";
import { ref } from "vue";
const username = ref("");
const password = ref("");
const onSubmit = (values) => {
  console.log("submit", values);
  console.log(values.username);


  if (values.username == values.password && values.username == "user123") {
    console.log("登录成功");

    localStorage.setItem("isLogin", true);
  showNotify({ type:'success',message: '登录成功，即将跳转至主页！' });
console.log("123");

    setTimeout(() => {
      router.push({
        name: "home",
      });
    }, 1500);
    setTimeout(() => {
      console.log("刷新");
      window.location.reload();
    }, 1600);
  } else {
    console.log("账号或密码错误");
  showNotify({ type:'danger',message: '账号或密码错误' });

  }
};

</script>

<style scoped>
.login {
  margin-top: 10%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* border: 1px solid #000; */
}
img {
  width: 20%;
}
.form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  /* border: 1px solid #000; */
}
input {
  width: 90%;
  margin: 0 auto;
}
.txt {
  width: 90%;
  margin: 15px auto;
  display: flex;
  justify-content: space-between;
}
button {
  width: 90%;
  margin: 0 auto;
  color: white;
  background-color: #db3d3c;
  border: 0px;
  padding: 10px;
}
</style>
